<template>
	<div class="dh_jmhy_balance">
		<!-- 导航栏 -->
		 <div class="d_j_b-ancestor">
			
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
					
				<el-form-item label="查询信息">
					<el-input v-model="formInline.user" placeholder="请输入详细信息"></el-input>
				</el-form-item>
				
				<el-form-item label="查询项">
					<el-select v-model="formInline.region" placeholder="全部数据">
						<el-option v-for="(item,key) in optionlabel" :key="key" :label="item" :value="key"></el-option>
					</el-select>
				</el-form-item>
				
				<el-form-item>
					<el-button type="primary" @click="onSubmit">查询</el-button>
				</el-form-item>
				
			</el-form>
		
			<div class="d_j_b-an-flex">

					
				<div class="d_j_bala-list">
					<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"><!--  @select="handleSelect" -->
						<el-menu-item index="1">已结算</el-menu-item> <!--   v-for="(item,index) in typestate.slice(0,4)" :key="index" -->
						<el-menu-item index="2">未结算</el-menu-item>
					</el-menu>
					<!-- 数据列表类名称 -->
					<div class="d_j_b-l-title">
						
						<div v-if="balancestate === 1">
							<div>会员号</div>
							<div>会员名称</div>
							<div>手机号</div>
							<div>结算次数</div>
							<div>结算详情</div>
						</div>
						
						<div v-else>
							<div>会员号</div>
							<div>会员名称</div>
							<div>手机号</div>
							<div>余额</div>
							<div>结算</div>
						</div>

					</div>
					<!-- 列表数据 -->
					<div class="d_j_b-list-details">
						
						<div class="d_j_b-l-det-son" v-for="(item,key) in closecontract" :key="key" v-if="balancestate === 1">
							<div>{{item.user_id}}</div>
							<div>{{item.real_name}}</div>
							<div>{{item.phone}}</div>
							<div>{{finishmap[item.user_id]}}</div>
							<a @click="coupondata(item.user_id)">查看</a>
						</div>
						
						<div class="d_j_b-l-det-son" v-for="(items,keys) in opencontract" :key="items.id" v-if="balancestate === 2">
							<div>{{items.id}}</div>
							<div>{{items.real_name}}</div>
							<div>{{items.phone}}</div>
							<div>{{items.balance}}</div>
							<!-- 结算按钮，包括弹窗 -->
							<a @click="coupondata(items.id)">处理</a>

						</div>
						
					</div>
					
				</div>

				<!-- 分页 -->
				<div class="d_j_sync-block">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page.sync="currentPage"
						:page-size="100"
						layout="prev, pager, next, jumper"
						:total="1000">
					</el-pagination>
				</div>

			</div>

		</div>

	</div>
</template>

<script>
import {date} from '../js/time.js';  			//用于时间戳转换时间
import { timetamp } from '../js/timestamp';		//用户日期转时间戳
	export default{
		data(){
			return{
				dialogFormVisible: false,	//弹出层时间的状态
				bind: false,				//结算弹窗
				value: '',					//组件input框日期组件绑定的动态值
				input: '',					//组件金额输入框的双向绑定的动态值
				loca: {id:0,sub:1,money:0},	//弹出层拿不到点击数据的下标额外做的转接值
				login:'',					//缓存中的保存的账号密码
				finishmap:{},
				startmap:{},
				currentPage: 1,				//分页的默认页数
				
				activeIndex: '1',			//纵向导航栏的状态值s
				balancestate: 1,    		//横向的导航栏选中下标，用来判断结算显示的列表数据
				closecontract:[],   		//已结算的数据数组
				opencontract:[],			//未结算的数据数组
				formInline: {
					user: '',
					region: ''
				},
				optionlabel:['会员号','姓名','手机号',]
			}
		},
		methods: {
			onSubmit() {
				// console.log('submit!');
			},
			//分页自带的两个函数
			handleSizeChange(val) {
				// console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
			},
			//导航栏默认的函数，
			handleSelect(key, keyPath) {
				// console.log(key, keyPath);
				if(this.balancestate === key){
					// console.log("运行")
					return false
				}else{
					this.balancestate = Number(key)
				}
			},
			// 列表数据的请求方法
			applydata(url,q){
				let that = this
				// console.log("接受的值",url,q)
				const axios = require('axios')
				that.login = JSON.parse(sessionStorage.getItem("dh_jmhylogin"))
				let data = {name:that.login.uname,password: that.login.pwd}
				let updata = JSON.stringify(data)
				axios({
					method: 'post',
					url: url,
					header: {"Content-Type": "application/JSON"},
					data: updata
				})
				.then( resp=> {
					//已结算的数据
					// console.log(q === 0)
					if(q === 0){
						let data = resp.data.data
						// console.log("接口数据",data)
						//检测时间中是否有需要转化的数据
						let finishmap = that.finishmap;
						let i = 0, len = data .length;
						for (; i < len; i++) {				 	//循环查找
						    let v = data [i].user_id;			//数组里的i个元素				    
						    let counts = finishmap[v];				//将数组的i个元素作为map对象的属性查看其属性值				    
						    if (counts) {finishmap[v] += 1;}			//如果map对象没有该属性，则设置该属性的值为1，有的话在其基础上再+1
						    else {finishmap[v] = 1;}
						}
						// console.log("计算",that.finishmap)
						// let data = resp.data.data
						let arr = data
						let result = that.closecontract;
					    let obj = {};
					    for(var i =0; i<arr.length; i++){
					        if(!obj[arr[i].user_id]){
					            result.push(arr[i]);
					        	obj[arr[i].user_id] = true;
					    	}
						}
					//未结算的数据
					}else{
						let data = resp.data.data
						// console.log("接口数据",data)
						//检测时间中是否有需要转化的数据
						let startmap = that.startmap;
						let i = 0, len = data .length;
						for (; i < len; i++) {				 	//循环查找
						    let v = data [i].id;			//数组里的i个元素				    
						    let counts = startmap[v];				//将数组的i个元素作为map对象的属性查看其属性值				    
						    if (counts) {startmap[v] += 1;}			//如果map对象没有该属性，则设置该属性的值为1，有的话在其基础上再+1
						    else {startmap[v] = 1;}
						}
						// console.log(that.startmap)
						// let data = resp.data.data
						let arr = data
						let result = that.opencontract;
					    var obj = {};
					    for(var i =0; q<arr.length; i++){
					        if(!obj[arr[i].id]){
					            result.push(arr[i]);
					        	obj[arr[i].id] = true;
					    	}
						}
					}
					
				})
				.catch( err=> {
					// console.log(err)
				})
			},
			//结算的弹窗按钮，父级能拿到循环的值，location就是拿到的id，
			//在结算弹窗结算用this.location,结算按钮直接用key
			// visible(id,key,money){
			// 	let that = this
			// 	that.loca.id = id     //上传的user_id的值
			// 	that.loca.sub = key   //页面数据的下标，用于结算寻找数据位置
			// 	that.loca.money = money //推荐结算金额
			// 	that.dialogFormVisible = true  //弹窗
			// },
			//结算的弹窗，用于上传结算信息
			refer(){
				let that = this
				let key = that.loca.sub  //结算数据的在页面的下标
				const axios = require("axios")
				//结算必须有有时间和金额，否则不执行
				if(that.input !== "" && that.value !== ""){
					let d = timetamp(that.value)
					that.dialogFormVisible = false
					
					//接口数据更新，结算金额小于等于推荐结算金额生效
					if(Number(that.input) <= that.loca.money){
						let data = {
							name: that.login.uname,
							password: that.login.pwd,
							user_id: that.loca.id,
							time: d,
							money: that.input
						}
						let updata = JSON.stringify(data)
						axios({
							method: 'post',
							url: '/api/api/dh_jm/business_settled.php',
							header: {"Content-Type": "application/JSON"},
							data: updata,
						})
						.then( resp=> {
							// console.log(resp)
							that.opencontract[key].money =  that.loca.money - Number(that.input)
							that.input = ""
							that.value = ""
							//结算的提示弹窗
							this.$confirm('结算成功', {
								// confirmButtonText: '确定',
								cancelButtonText: false,
								showCancelButton: false
							}).then(() => {
								this.$message({
									type: 'success',
									message: '佣金已结算'
								});
							}).catch(() => {
								// this.$message({
								// 	type: 'info',
								// 	message: '已取消删除'
								// });          
							});			
						})
						.catch( err=> {
							// console.log(err)
						})
						
					}else{alert("结算金额不能大于推荐结算金额")}
					
				}else{alert("结算时间和结算金额不能为空")}
			},
			// 路由传值的函数
			coupondata(index){
				// console.log(index)
				this.$router.push({
					name: 'badet',
					query: {id:index,key:this.balancestate} 
				})
			}
		},
		mounted(){
			let that = this
			let url
			for(var q=0;q<2;q++){
				// console.log(i)
				switch(q){
					case 0: 
					    url = '/api/api/dh_jm/business_finish.php'
						that.applydata(url,q)
						break;
					case 1:
						url = '/api/api/dh_jm/business_unsettled.php'
						that.applydata(url,q)
						break;
					default:break;
				}
			}

			// 页面手动刷新指定路由
			//获取地址栏中的路由，设置elementui中的导航栏选中状态
			let defaultMenu = window.location.hash.substr(
				window.location.hash.indexOf("/")
			);
			this.activerouter = defaultMenu;
		}
	}
			
</script>

<style>
	/* 标签默认样式修改 */
	button{
		outline: none;
		color: white;
		background-color: transparent;
		border: 0;
	}
	a:hover{
		color: aquamarine;
	}
	/* 组件的最外层盒子 */
	.dh_jmhy_balance{
		width: 100%;
		padding: 20px;
		box-sizing: border-box;
	}
	.d_j_b-ancestor{
		height: 100%;
	}
	.d_j_b-an-flex{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: calc(100% - 62px);
		box-sizing: border-box;
	}
	/* 内容的样式 */
	.d_j_bala-list{
		overflow: hidden;
		font-size: 14px;
		background-color: white;
		border: 1px solid #cecece;
		border-radius: 5px;
	}
	div.d_j_bala-list>ul{
		height: auto;
	}
	/* 数据列表类名称 */
	.d_j_b-l-title>div{
		display: grid;
		/* grid-template-columns: repeat(5, minmax(0, 1fr)); */
		grid-auto-rows: 50px;
		grid-template-columns: 0.8fr 1fr 1fr 1fr 1.2fr;
	}
	.d_j_b-l-title>div>*::before,.d_j_b-l-det-son>*::before{
		display: inline-block;
		content: '';
		height: 100%;
		vertical-align: middle;
	}
	/* 白色导航栏的改高度 */
	.d_j_bala-list>.el-menu--horizontal>.el-menu-item{
		height: 50px;
		line-height: 50px;
	}
	/* 列表的数据样式 */
	.d_j_b-l-det-son{
		display: grid;
		/* grid-template-columns: repeat(5, minmax(0, 1fr));*/
		grid-auto-rows: 50px;
		grid-template-columns: 0.8fr 1fr 1fr 1fr 1.2fr;
	}
	.d_j_b-l-det-son>a{
		cursor:pointer
	}
	/* 数据列表的背景色，用的选择起的偶数生效区分每项 */
	.d_j_b-l-det-son:nth-child(odd){
		background-color: #e1e1e1;
	}
	/* 结算按钮，包括弹窗的样式 */
	.d_j_s-l-d-s-btn{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.d_j_s-l-d-s-btn>button{
		color: white;
	}
	.el-button--default{
		background-color: #409eff;
	}
	.djs-ldsb-red{
		background-color: #f56c6c;
	}
	
	/* 弹窗样式 */
	.el-dialog__body{
		text-align: center;
	}
	.block,.d_j_slds-btn-money{
		text-align: center;
		margin-bottom: 30px;
	}
	.el-button{
		padding: 10px 15px;
	}
	.el-button+.el-button{
		margin: 0;
	}
	.d_j_slds-b-m-price{
		width: 220px;
	}
	.d_j_slds-btn-confirm{
		text-align: center;
	}
	
	/* 结算弹窗 */
	.el-message-box{
		width: 300px;
	}
	.el-message-box__content{
		text-align: center;
		line-height: 120px;
	}
	.el-message-box__btns{
		text-align: center;
	}
</style>
